<template>
  <van-nav-bar
    title="朋友圈"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="moments-container">
    <van-swipe-cell v-for="(moment, index) in moments" :key="index">
      <van-card
        :desc="moment.content"
        :thumb="moment.avatar"
      />
    </van-swipe-cell>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const moments = ref([
  {
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    content: '今天天气真好！'
  },
  {
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/dog.jpeg',
    content: '新买的手机到了，真开心！'
  }
])

const onClickLeft = () => {
  history.back()
}
</script>

<style scoped>
.moments-container {
  padding: 10px;
}
</style>